<template>
	<view class="container">
		<view style="padding: 30rpx;">
			<view class="player-card  person-contribute-card">
				<view class="card-title">贡献榜</view>
				<view class="contribute-container">
					<view class="top-bg">
						<view class="top-bottom-img" :style="{ backgroundImage: 'url( ' + platform + ' )' }"></view>
						<view class="top-contribute-content">
							<view class="no-container" v-if="giftRankList.length > 0">
								<view class="header-border-1">
									<view class="border-1-bg">
										<view class="border-1"></view>
										<view class="border-1-header" :style="{ backgroundImage: 'url( ' + giftRankList[0].CustomerImg + ' )' }"></view>
									</view>
									<view class="border-1-name">
										<view class="header-person-name header-person-text ">{{ giftRankList[0].CustomerName }}</view>
										<view class="header-person-text ">贡献：{{ giftRankList[0].TotalValue | numFormat }}</view>
									</view>
								</view>
								<view class="header-border-2" v-if="giftRankList.length > 1">
									<view class="border-2-bg">
										<view class="border-2">
											<view class="border-1"></view>
											<view class="border-2-header" :style="{ backgroundImage: 'url( ' + giftRankList[1].CustomerImg + ' )' }"></view>
										</view>
									</view>
									<view class="border-2-name">
										<view class="header-person-name header-person-text ">{{ giftRankList[1].CustomerName }}</view>
										<view class="header-person-text ">贡献：{{ giftRankList[1].TotalValue | numFormat }}</view>
									</view>
								</view>
								<view class="header-border-3" v-if="giftRankList.length > 2">
									<view class="border-3-bg">
										<view class="border-3"></view>
										<view class="border-3-header" :style="{ backgroundImage: 'url( ' + giftRankList[2].CustomerImg + ' )' }"></view>
									</view>
									<view class="border-3-name">
										<view class="header-person-name header-person-text ">{{ giftRankList[2].CustomerName }}</view>
										<view class="header-person-text ">贡献：{{ giftRankList[2].TotalValue | numFormat }}</view>
									</view>
								</view>
							</view>
							<view v-else class="no-container-tips">暂无人上榜，快去送礼冲榜吧~~</view>
						</view>
					</view>
				</view>
			</view>
			<view class="person-info-card player-card">
				<view class="person-info-card__header">
					<view class="person-info-card__header-img" :style="{ backgroundImage: 'url( ' + servePlayerInfo.HeadImg + ' )' }"></view>
					<view class="person-info-card__header-middle">
						<view class="name-container">
							<text>{{ servePlayerInfo.NickName }}</text>
							<text v-if="servePlayerInfo.IsWork" class="work-descr">(在线)</text>
							<text v-else class="work-descr">({{ servePlayerInfo.WorkDescr }})</text>
						</view>
						<view class="server-number">ID:{{ servePlayerInfo.ServeNumber }}</view>
						<view class="server-hourly-wage">
							<text class="price">{{ servePlayerInfo.HourlyWage }}</text>
							<text class="price-unit">{{ servePlayerInfo.SeverPlayHourlyWageUnitStr }}</text>
						</view>
					</view>
					<view class="person-info-card__header-right">
						<view class="flow-btn" @click="cancel_attention()" v-if="servePlayerInfo.IsFans">已关注</view>
						<view class="fans-btn" @click="to_attention()" v-else>关注</view>
					</view>
				</view>
				<view class="game-tag-container">
					<view class="game-tag-container-top">
						<view class="game-tag-container-top__item" v-for="(item, index) in tagList" :key="index">{{ item.TagName }}</view>
					</view>
					<view class="game-tag-container-sign">{{ servePlayerInfo.Sign | initFormatStr }}</view>
				</view>
			</view>
			<view class="player-card daren-photo">
				<view class="daren-photo__header" @click="clickMorePhoto">
					<view class="card-title">照片</view>
					<view class="daren-photo__header-more"><image class="more-icon" src="../../../static/images/right-33.png"></image></view>
				</view>
				<view v-if="photoList.length == 0" class="no-content">暂无照片</view>
				<view scroll-x="true" class="daren-photo-swiper" v-else>
					<view class="daren-photo-swiper__item" v-for="(item, index) in photoList" :key="index">
						<view v-if="item.MediaUrl" :style="{ backgroundImage: 'url( ' + item.MediaUrl + ' )' }" @click="previewimage(index)" class="daren-img">
							<view class="daren-bottom" v-if="item.IsLike" @click.stop="cancel_like(item)">
								<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart.png"></image></view>
								<view>{{ item.LikeCount }}</view>
							</view>

							<view class="daren-bottom" v-else @click.stop="to_like(item)">
								<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart-black.png"></image></view>
								<view>{{ item.LikeCount }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="player-card daren-video-card">
				<view class="daren-photo__header" @click="clickMoreVideo">
					<view class="card-title">视频</view>
					<view class="daren-photo__header-more"><image class="more-icon" src="../../../static/images/right-33.png"></image></view>
				</view>
				<view v-if="videoList.length == 0" class="no-content">暂无视频</view>
				<view class="daren-video-swiper" v-else>
					<view class="daren-video-swiper__item" v-for="(item, index) in videoList" :key="index">
						<view v-if="item.MediaUrl">
							<video class="daren-video" :src="item.MediaUrl">
								<view class="daren-bottom" v-if="item.IsLike" @click.stop="cancel_like(item)">
									<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart.png"></image></view>
									<view>{{ item.LikeCount }}</view>
								</view>
								<view class="daren-bottom" v-else @click.stop="to_like(item)">
									<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart-black.png"></image></view>
									<view>{{ item.LikeCount }}</view>
								</view>
							</video>
						</view>
					</view>
				</view>
			</view>
			<view class="player-card person-evaluate-card">
				<view class="daren-photo__header" @click="clickEvaluate">
					<view class="card-title">评论</view>
					<view class="daren-photo__header-more"><image class="more-icon" src="../../../static/images/right-33.png"></image></view>
				</view>
				<view v-if="commentList.length == 0" class="no-content">暂无评论</view>
				<view v-for="(item, index) in commentList" :key="index" class="evaluate-info "><evaluate-info :item="item"></evaluate-info></view>
			</view>
		</view>
		<view class="bottom-view" v-if="servePlayerInfo.IsWork && !isMyself">
			<view class="bottom-view-left-icon" @click="buyGift">送礼物</view>
			<view class="bottom-view-commit bottom-change-view" @click="goToChooseTime()">下单约TA</view>
		</view>
		<view class="gift-wrapper" v-show="isShowGift" @click="closeGift">
			<view class="gift-wrapper-content" @click.stop="stopEvent">
				<view class="all-gift">全部礼物</view>
				<swiper :autoplay="false" :indicator-dots="false" class="swiper-gift">
					<swiper-item v-for="(item, index) in giftList" :key="index">
						<view style="display: flex;flex-wrap: wrap;justify-content: center;">
							<view
								v-for="(child, index1) in item"
								:key="index1"
								:class="giftIndex == index1 ? 'gift-item selected-gift' : 'gift-item'"
								@click.stop="select_gift(child.Id, index1)"
							>
								<image class="gift-item-img" :src="child.GiftImage" style="max-width: 91px; max-height: 54px;"></image>
								<text style="color: #333333;">{{ child.GiftName }}</text>
								<text style="font-size: 26rpx;color: #666;">{{ child.GiftValue }} 积分</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="gift-bottom">
					<view class="input-container">
						数量
						<input maxlength="3" type="number" class="gift-bottom-input" v-model="giftCount" />
					</view>
					<view class="gift-bottom-btn bottom-change-view" @click.stop="send_gift()">赠&#12288;送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, errorToShow, showShareMenu, successToShow } from '@/config/common.js';
import {
	servePlayerDetailGiftRank,
	getWebServePlayerPhotoList,
	getWebServePlayerVideoList,
	getWebGiftList,
	givingGifts,
	servePlayerAttention,
	cancelPlayerAttention,
	updateServePlayerLikeCount,
	cancelServePlayerLikeCount
} from '@/constant/customer.js';

import { getOnlineServePlayerDetailComment, getOnlineServePlayerDetailInfo } from '@/constant/onlineServe.js';
import { baseImageUrl } from '@/config/config.js';
import platform from '@/static/images/platform.png';
import evaluateInfo from '@/packagePages/index/evaluate/components/evaluateInfo.vue';
// import { Console } from 'console';
export default {
	components: {
		evaluateInfo
	},
	data() {
		return {
			giftIndex: -1,
			isShowGift: false,
			baseImageUrl: baseImageUrl,
			platform: platform,
			servePlayerId: '',
			tagList: [],
			giftId: '',
			giftCount: 1,
			servePlayerInfo: {
				Id: '',
				HeadImg: '',
				NickName: '',
				ServeNumber: '',
				FullName: '',
				Sign: '',
				IsFans: '',
				FansCount: '',
				StarCount: '',
				StarTotal: '',
				HourlyWage: '',
				ServePlayerTagDetailInfoList: [],
				WorkDescr: '',
				IsWork: false,
				LatestComment: ''
			},
			giftRankList: [],
			photoList: [],
			photoUrlList: [],
			videoList: [],
			commentList: [],
			customerId: uni.getStorageSync('customerId'),
			giftList: [],
			isMyself: false
		};
	},
	onLoad(option) {
		showShareMenu();
		if (option.playerId) {
			this.servePlayerId = option.playerId;
			if (this.servePlayerId) {
				this.isMyself = this.servePlayerId == this.customerId;
				this.getGiftRankList();
				this.getServePlayerDetail();
				this.servePlayerPhotoList();
				// this.servePlayerVideoList();
				//this.comment_qty();
				this.latest_comment();
				this.gift_list();
			}
		}
	},
	methods: {
		stopEvent() {},
		closeGift() {
			this.isShowGift = false;
		},
		buyGift() {
			this.isShowGift = true;
		},
		select_gift(id, index) {
			this.giftId = id;
			this.giftIndex = index;
		},
		clickEvaluate() {
			if (this.commentList.length == 0) {
				return;
			}
			uni.navigateTo({
				url: '/packagePages/onlinePlay/evaluate/index?servePlayerId=' + this.servePlayerId
			});
		},
		clickMorePhoto() {
			if (this.photoList.length == 0) {
				return;
			}
			uni.navigateTo({
				url: '/packagePages/index/morePhoto/index?servePlayerId=' + this.servePlayerId
			});
		},
		clickMoreVideo() {
			if (this.videoList.length == 0) {
				return;
			}
			uni.navigateTo({
				url: '/packagePages/index/moreVideo/index?servePlayerId=' + this.servePlayerId
			});
		},
		async getServePlayerDetail() {
			let res = await getOnlineServePlayerDetailInfo({
				servePlayerId: this.servePlayerId,
				customerId: this.customerId
			});
			this.servePlayerInfo = res;
			let list = this.servePlayerInfo.ServePlayerTagDetailInfoList;
			for (var i = 0; i < list.length; i++) {
				this.tagList.push({
					TagName: list[i].TagName
				});
			}
		},
		async getGiftRankList() {
			console.log(1111)
			//获取贡献榜前三名
			let res = await servePlayerDetailGiftRank({
				servePlayerId: this.servePlayerId
			});
			this.giftRankList = res;
		},
		async to_attention() {
			//关注
			if (this.servePlayerId && this.customerId) {
				await servePlayerAttention({
					servePlayerId: this.servePlayerId,
					customerId: this.customerId
				});
				this.servePlayerInfo.IsFans = true;
				uni.showToast({
					title: '关注成功',
					icon: 'none',
					duration: 2000
				});
			}
		},
		async cancel_attention() {
			//取消关注
			if (this.servePlayerId && this.customerId) {
				await cancelPlayerAttention({
					servePlayerId: this.servePlayerId,
					customerId: this.customerId
				});
				this.servePlayerInfo.IsFans = false;
				uni.showToast({
					title: '取消关注',
					icon: 'none',
					duration: 2000
				});
			}
		},
		async servePlayerPhotoList() {
			//照片列表
			if (this.servePlayerId && this.customerId) {
				let result = await getWebServePlayerPhotoList({
					serverPlayerId: this.servePlayerId,
					customerId: this.customerId
				});
				this.photoList = result.data.servePlayerMediaList;
				this.photoUrlList = [];
				this.photoList.forEach(element => {
					this.photoUrlList.push(element.MediaUrl);
				});
				if(res.data.videoUrl){
					 this.videoList = Array.from({length:1}).fill(res.data.videoUrl)
				}else{
					 this.videoList = []
				}
				
			}
		},
		async servePlayerVideoList() {
			//视频列表
			if (this.servePlayerId && this.customerId) {
				let result = await getWebServePlayerVideoList({
					servePlayerId: this.servePlayerId,
					customerId: this.customerId
				});
				this.videoList = result;
			}
		},

		async latest_comment() {
			//最新评论
			if (this.servePlayerId && this.customerId) {
				let result = await getOnlineServePlayerDetailComment({
					serverPlayerId: this.servePlayerId
				});
				this.commentList = result;
			}
		},
		async to_like(select_item) {
			//点赞
			if (this.servePlayerId && this.customerId) {
				await updateServePlayerLikeCount({
					servePlayerId: this.servePlayerId,
					mediaId: select_item.Id,
					customerId: this.customerId
				});
				select_item.IsLike = true;
				select_item.LikeCount++;
			}
		},
		async cancel_like(select_item) {
			//取消点赞
			if (this.servePlayerId && this.customerId) {
				await cancelServePlayerLikeCount({
					servePlayerId: this.servePlayerId,
					mediaId: select_item.Id,
					customerId: this.customerId
				});
				select_item.IsLike = false;
				if (select_item.LikeCount > 1) {
					select_item.LikeCount--;
				} else {
					select_item.LikeCount = 0;
				}
			}
		},
		async gift_list() {
			//礼物列表
			let result = await getWebGiftList();
			this.giftList.push(result);
		},
		async send_gift() {
			//赠送礼物
			let that = this;
			uni.showModal({
				title: '',
				content: '确定消费积分赠送该礼物吗？',
				success: function(res) {
					if (res.confirm) {
						that.sendGift();
					} else {
						that.giftId = '';
						that.giftCount = 1;
					}
				}
			});
		},
		async sendGift() {
			//赠送礼物
			if (this.servePlayerId && this.customerId) {
				if (!this.giftId) {
					uni.showToast({
						title: '请选择礼物',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.giftCount || this.giftCount <= 0) {
					uni.showToast({
						title: '礼物数量必须大于1',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				await givingGifts({
					ServerPlayerId: this.servePlayerId,
					CustomerId: this.customerId,
					GiftId: this.giftId,
					GiftCount: this.giftCount
				});
				this.giftId = '';
				this.giftCount = 1;
				this.closeGift();
				this.getGiftRankList();
				successToShow('礼物已送出');
			}
		},
		previewimage(index) {
			uni.previewImage({
				current: index,
				urls: this.photoUrlList
			});
		},
		goToChooseTime() {
			let userInfo = uni.getStorageSync('customerInfo');
			let customer_improved = userInfo.ImprovedInfo;
			if (customer_improved) {
				uni.setStorageSync('online_playorder_serverId', this.servePlayerId);
				uni.setStorageSync('online_playorder_headImg', this.servePlayerInfo.HeadImg);
				uni.setStorageSync('online_playorder_serveName', this.servePlayerInfo.NickName);
				uni.setStorageSync('online_playorder_serveNumber', this.servePlayerInfo.ServeNumber);
				uni.setStorageSync('online_playorder_servehourlyWage', this.servePlayerInfo.HourlyWage);
				uni.setStorageSync('online_playorder_servehourlyWageUnit', this.servePlayerInfo.SeverPlayHourlyWageUnitStr);
				uni.navigateTo({
					url: '/packagePages/onlinePlay/placeorder/index?servePlayerId=' + this.servePlayerId
				});
			} else {
				errorToShow('请完善个人信息', res => {
					uni.reLaunch({
						url: '/pages/mine/index'
					});
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	overflow-y: auto;
	position: relative;
	height: calc(100% - 100rpx);
}

.card-title {
	font-size: $main-text-size-40;
	font-family: 'SourceHanSansCN-Medium';
}

.no-content {
	text-align: center;
	padding: 16rpx;
	color: #999999;
}

.player-card {
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
	margin-bottom: 30rpx;
	border-radius: 20rpx;
}

.header-person-name {
	background-color: #e6b30a;
	border-radius: 48rpx;
	padding: 6rpx 8rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 148rpx;
	margin-bottom: 16rpx;
}

.header-person-text {
	font-family: 'SourceHanSansCN-Regular';
	font-size: $main-text-size-20;
	color: #ffffff;
	text-align: center;
}

.person-contribute-card {
	height: 454rpx;
	position: relative;
	padding: 40rpx;

	.top-bg {
		height: calc(100% - 20rpx);
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;

		.top-bottom-img {
			height: 184rpx;
			width: 564rpx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: absolute;
			bottom: 40rpx;
		}

		.top-contribute-content {
			height: 100%;
			width: 100%;

			.no-container {
				height: 100%;

				.header-border-1 {
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
					position: absolute;
					left: 234rpx;

					.border-1-name {
						margin-top: 72rpx;
					}
				}

				.header-border-2 {
					display: flex;
					flex-direction: column;
					margin-top: 74rpx;
					position: absolute;
					left: 40rpx;

					.border-2-name {
						margin-top: 72rpx;
					}
				}

				.header-border-3 {
					display: flex;
					flex-direction: column;
					margin-top: 110rpx;
					position: absolute;
					right: 32rpx;

					.border-3-name {
						margin-top: 72rpx;
					}
				}
			}
		}
	}

	.contribute-container {
		height: 100%;
	}
}

.no-container-tips {
	color: #acacac;
	text-align: center;
	margin-top: 74rpx;
}

.person-info-card {
	padding: 40rpx;
	width: unset;

	&__header {
		display: flex;
		justify-content: space-between;
		min-height: 128rpx;
		margin-bottom: 20rpx;

		&-img {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}

		&-middle {
			margin-left: 20rpx;
			width: calc(100% - 288rpx);
			font-family: 'SourceHanSansCN-Regular';
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name-container {
				font-size: $main-text-size-32;
				font-family: 'SourceHanSansCN-Medium';

				.work-descr {
					color: #01b219;
					font-size: $main-text-size-24;
					margin-left: 10rpx;
				}
			}

			.server-number {
				font-size: $main-text-size-28;

				color: $main-text-color-grey;
			}

			.server-hourly-wage {
				color: $main-text-color-gray-33;
				font-size: $main-text-size-32;

				.price {
					color: $main-text-color-main-orange;
					font-family: 'SourceHanSansCN-Medium';
				}
				.price-unit {
					font-family: 'SourceHanSansCN-Regular';
					font-size: $main-text-size-28;
				}
			}
		}

		&-right {
			.flow-btn {
				background-color: rgb(208, 208, 208);
				color: #fff;
				padding: 10rpx 24rpx 10rpx 24rpx;
				border-radius: 10rpx;
				margin-left: auto;
				font-size: $main-text-size-28;
				width: 96rpx;
				text-align: center;
			}

			.fans-btn {
				background-color: $main-btn-orange-color;
				color: #fff;
				padding: 10rpx 24rpx 10rpx 24rpx;
				border-radius: 10rpx;
				margin-left: auto;
				font-size: $main-text-size-28;
				width: 96rpx;
				text-align: center;
			}
		}
	}

	.game-tag-container {
		border-bottom: 2rpx solid $main-line-color;
		padding-bottom: 30rpx;
		
		&-top {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			&__item {
				font-size: 28rpx;
				padding: 10rpx 16rpx;
				color:  $main-text-color-orange-FCC309;
				border-radius: 8rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border: 2rpx solid $main-btn-orange-color-FCC309;
			}
		}

		&-sign {
			font-size: $main-text-size-28;
			color: $main-text-color-gray-33;
		}
	}
}

.daren-photo {
	width: unset;
	padding-bottom: 40rpx;

	&__header {
		display: flex;
		font-size: 30rpx;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 40rpx 40rpx 0 40rpx;

		&-more {
			margin-left: auto;
		}

		&-icon {
			width: 36rpx;
			height: 36rpx;
			margin-left: 20rpx;
		}

		.more-icon {
			width: 20rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}
	}
}

.daren-photo-swiper::-webkit-scrollbar {
	display: none;
}

.daren-photo-swiper {
	width: 100%;
	display: flex;
	overflow-x: auto;
	height: 296rpx;

	&__item {
		display: inline-block;
		margin-right: 20rpx;

		.daren-img {
			width: 240rpx;
			height: 282rpx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: relative;
			border-radius: 16rpx;
		}

		.daren-bottom {
			font-size: $main-text-size-28;
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			color: #ffffff;
			display: flex;
			align-items: baseline;
			font-family: 'SourceHanSansCN-Regular';
			width: 121rpx;
			height: 60rpx;
			justify-content: flex-end;
			align-items: flex-end;

			&-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.daren-video-card {
	width: unset;
	padding-bottom: 40rpx;
}

.daren-video-swiper::-webkit-scrollbar {
	display: none;
}

.daren-video-swiper {
	width: 100%;
	display: flex;
	overflow-x: auto;
	height: 296rpx;

	&__item {
		display: inline-block;
		margin-right: 20rpx;

		.daren-video {
			width: 240rpx;
			height: 280rpx;
			border-radius: 16rpx;

			.daren-bottom {
				font-size: $main-text-size-28;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				color: #ffffff;
				display: flex;
				align-items: baseline;
				font-family: 'SourceHanSansCN-Regular';
				width: 121rpx;
				height: 60rpx;
				align-items: center;
				justify-content: flex-end;

				&-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 4rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

.bottom-view {
	position: fixed;
	bottom: 0rpx;
	padding-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $main-text-size-28;
	background-color: #fff;
	height: 98rpx;
	z-index: 99;
	font-family: 'SourceHanSansCN-Regular';
	width: 100%;

	.bottom-view-left-icon {
		padding: 20rpx 72rpx;
		color: $main-text-color-orange-FCC309;
		border: 2rpx solid $main-btn-orange-color-FCC309;
		border-radius: 12rpx;
		margin-left: 30rpx;
	}

	&-commit {
		color: #ffffff;
		padding: 20rpx 158rpx;
		margin-right: 30rpx;
		border-radius: 12rpx;
	}
}

.gift-wrapper {
	position: fixed;
	z-index: 999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	font-family: 'SourceHanSansCN-Regular';

	&-content {
		width: 750rpx;
		height: 770rpx;
		overflow-y: auto;
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 28rpx;
		animation: mymove 0.5s 1;
		background-color: #ffffff;

		.all-gift {
			padding: 20rpx;
			color: $main-text-color-gray-33;
			font-size: $main-text-size-32;
		}

		.swiper-gift {
			height: 690rpx;
		}

		.gift-item {
			width: 24%;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: $main-text-size-28;
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			border: 2rpx solid transparent;

			&-img {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.gift-bottom {
			display: flex;
			position: absolute;
			bottom: 20rpx;
			height: 98rpx;
			width: calc(100% - 80rpx);
			align-items: center;
			color: $main-text-color-gray-33;
			background-color: #fff;
			padding: 0 40rpx;
			justify-content: space-between;
			font-size: $main-text-size-28;

			.input-container {
				display: flex;
				align-items: center;
			}

			&-input {
				text-align: center;
				border: 2rpx solid #fcc309;
				padding: 16rpx 0;
				width: 160rpx;
				border-radius: 12rpx;
				margin-left: 16rpx;
				color: $main-text-color-orange-FCC309;
			}

			&-btn {
				padding: 20rpx 80rpx;
				color: #ffffff;
				border-radius: 12rpx;
			}
		}
	}
}

.person-evaluate-card {
	margin-bottom: 106rpx;
	padding: 0 0 40rpx 0;
	width: unset;

	.evaluate-info {
		padding: 0 40rpx;
	}
}

@keyframes mymove {
	from {
		bottom: -200px;
	}

	to {
		bottom: 0;
	}
}

.selected-gift {
	border: 2rpx solid $main-btn-orange-color-FCC309 !important;
	border-radius: 8rpx;
	color: $main-text-color-orange-FCC309;
}

.border-1-bg {
	width: 156rpx;
	height: 156rpx;
	position: relative;
	.border-1 {
		background-image: url('../../../static/images/golden-1.png');
		background-repeat: no-repeat;
		background-size: 60rpx 60rpx;
		width: 100%;
		height: 100%;
		margin-left: -14rpx;
	}
	.border-1-header {
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		width: 120rpx;
		height: 120rpx;
		top: 24rpx;
		border-radius: 50%;
		border: 6rpx solid #fdd016;
		left: 8rpx;
	}
}

.border-2-bg {
	width: 126rpx;
	height: 128rpx;
	position: relative;
	.border-2 {
		background-image: url('../../../static/images/silvery-1.png');
		background-repeat: no-repeat;
		background-size: 52rpx 52rpx;
		width: 100%;
		height: 100%;
		margin-left: -14rpx;
	}
	.border-2-header {
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		width: 116rpx;
		height: 116rpx;
		top: 18rpx;
		border-radius: 50%;
		border: 6rpx solid #c7d4e4;
		left: 6rpx;
	}
}

.border-3-bg {
	width: 116rpx;
	height: 120rpx;
	position: relative;
	.border-3 {
		background-image: url('../../../static/images/Copper-1.png');
		background-repeat: no-repeat;
		background-size: 46rpx 46rpx;
		width: 100%;
		height: 100%;
		margin-left: -14rpx;
	}

	.border-3-header {
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		width: 104rpx;
		height: 104rpx;
		top: 16rpx;
		border-radius: 50%;
		border: 6rpx solid #f7a771;
		left: 2rpx;
	}
}

.renqi-icon {
	width: 32rpx;
	height: 38rpx;
	margin-right: 8rpx;
}

.evaluate-header-line {
	height: 2rpx;
	margin: 20rpx;
	background-color: #f5f6fd;
}

.daren-photo-swiper__item:first-child {
	margin-left: 40rpx;
}

.daren-photo-swiper__item:last-child {
	padding-right: 40rpx;
}

.daren-video-swiper__item:first-child {
	margin-left: 40rpx;
}

.daren-video-swiper__item:last-child {
	padding-right: 40rpx;
}
</style>
